<template>
	<view class="authentic">
		<image src="/static/images/id_logo.png" mode="widthFix" style="width: 50%;position:fixed;right:10rpx;top:10rpx;">
		</image>
		<view class="authentic_top flex">
			<image mode="widthFix" style="width: 20%;" src="/static/images/authentication.png" />
			<view class="top_right">
				<view class="top_mainTitle">实名认证安全保障</view>
			</view>
		</view>
		<view class="info_person">
			<view class="info_title">
				<view class="" style="margin-bottom: 20rpx;">
					核对您的个人信息
				</view>
			</view>
			<view class="flex justify-between" style="margin-bottom: 10rpx;">
				<view class="input_label flex align-center" style="margin-bottom: 10rpx;gap:40rpx">
					<text>您的邮箱</text>
					<input placeholder="请输入您的邮箱地址" type="text" v-model="email" />
				</view>
			</view>
			<view class="idCard flex justify-between">
				<view class="img_view" @click="uploadPhoto(1)">
					<view class="">
						<image v-if="!card_front.length" src="/static/images/ID-card1.png" mode="scaleToFill"
							style="width:278rpx;height: 214rpx ;"></image>
						<image v-else :src="getImg(card_front)" mode="scaleToFill" style="width:278rpx;height: 214rpx ;"></image>
					</view>
				</view>
				<view class="img_view" @click="uploadPhoto(2)">
					<view class="">
						<image v-if="!card_back.length" src="/static/images/ID-card2.png" mode="scaleToFill"
							style="width:278rpx;height: 214rpx ;"></image>
						<image v-else :src="getImg(card_back)" mode="scaleToFill" style="width:278rpx;height: 214rpx ;">
						</image>
					</view>
				</view>
			</view>
			<view class="">
				<image src="/static/images/AuthChecked.png" mode="scaleToFill" style="width: 32rpx;height: 32rpx;">
				</image>
				<text class="radio-text">我同意e签宝采集人脸照片并提供给广州皓海同舟信息技术有限公司用于实名认证</text>
			</view>
		</view>
		<view class="info_btn">
			<button style="" @click="handleClick">完成认证</button>
			<!-- <button style="" @click="handleOrder">确认下单</button> -->
		</view>z
	</view>
</template>

<script>
	import {
		debounce
	} from '@/utils/debounce'
	import {
		uploadImg
	} from '@/utils/request'
	import {
		realPersonAuth,
		getPersonAuth,
		faceAuthNotice,
		realPersonAuth2,
		uploadCard
	} from '@/api/authentication'
	export default {
		data() {
			return {
				userName: '',
				userIdcard: '',
				card_front: '',
				card_back: '',
				frontCard: [],
				backCard: [],
				orderId: '',
				goodsId: '',
				email: ''
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.goodsId = options.goodsId
			getPersonAuth().then(res => {
				this.userName = res.certName
				this.userIdcard = res.certNo
				this.card_front = res.cardFront
				this.card_back = res.cardBack
			})
		},
		onShow(options) {},
		methods: {
			handleOrder: debounce(function(e) {
				let params = {
					certName: this.userName,
					certNo: this.userIdcard,
					orderId: this.orderId,
					cardFront: this.card_front,
					cardBack: this.card_back,
					gooddsId: this.goodsId,
					email: this.email
				}
				realPersonAuth2(params).then(res => {
					uni.reLaunch({
						url: `/pagesA/my/order/myorder/orderDetail?order_id=${ params.orderId }`
					})
				})
			}, 200),
			getImg(url) {
				return getApp().globalData.baseImg + url;
			},
			onName: debounce(function(e) {
				this.userName = e.detail.value
			}, 2000),
			onIdcard: debounce(function(e) {
				this.userIdcard = e.detail.value
			}, 2000),
			handleClick: debounce(function(e) {
				const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				let params1 = {
					cardFront: this.card_front,
					cardBack: this.card_back,
					email: this.email
				}
				if(!reg.test(params1.email)) {
					uni.showToast({
						title: '邮箱格式有误',
						icon: 'error'
					})
					return
				}
				if (params1.email == '' || params1.cardFront == '' || params1.cardBack == '') {
					uni.showToast({
						icon: "error",
						title: '请填写资料'
					})
				} else {
					uploadCard(params1).then(res => {
						uni.showToast({
							icon: "success",
							title: '提交成功'
						})
						setTimeout(function() {
							uni.navigateTo({
								url: `/pagesA/my/order/myorder/myorder?id=0&active=0`
							})
						}, 1000)
					})
				}

			}, 1000),
			uploadPhoto(e) {
				let list = []
				let that = this
				if (e == 1) {
					uploadImg(function(url) {
						if (url) {
							list.push(url);
							that.frontCard = list
							that.card_front = list[0]
						}
					});
				} else {
					uploadImg(function(url) {
						if (url) {
							list.push(url);
							that.backCard = list
							that.card_back = list[0]
						}
					});
				}
			}
		}
	}
</script>

<style>
	.input_label {
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #E6E6E6;
		margin-top: 20rpx;
		width: 100%;
	}

	.authentic {
		height: 300rpx;
		background: linear-gradient(90deg, #F6706E, #FF7E63);
		padding-top: 200rpx;
		font-family: Source Han Sans CN;
		color: #333333;
		font-size: 30rpx;
	}

	.authentic_top {
		padding: 0 30rpx;
		margin-top: -120rpx;
	}

	.authentic_top image {
		width: 100rpx;
		height: 105rpx;
		margin: auto 0;
		margin-right: 30rpx;
	}

	.top_mainTitle {
		font-size: 46rpx;
		color: #FFF;
		margin-bottom: 15rpx;
	}

	.top_title {
		font-size: 26rpx;
		color: #FFF;
		line-height: 35rpx;
	}

	.info_person {
		width: 80%;
		margin: 0 auto;
		border-radius: 20rpx;
		height: 650rpx;
		background: #FFF;
		padding: 40rpx 50rpx;
		margin-top: 50rpx;
	}

	.info_title {
		font-size: 34rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
	}

	.input_label {
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #E6E6E6;
		margin-top: 20rpx;
	}

	.idCard {
		margin-bottom: 80rpx;
		box-sizing: border-box;
		flex-wrap: nowrap;
	}

	.img_view {
		width: 47%;
		height: 175rpx;
		background: #F9F9F9;
		border-radius: 10rpx;
		position: relative;
	}

	.info_btn {
		width: 90%;
		position: fixed;
		bottom: 0;
		left: 5%;
		margin-bottom: 20rpx;
	}

	.info_btn button {
		background: #F9736A;
		border-radius: 45rpx;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		box-sizing: border-box;
	}
</style>